<template>
  <div>
    <el-container>
      <el-header style="border-bottom: 1px solid #d7d5d5;">
        <div><img src="../assets/logo.png" alt=""></div>
        <div>夏令营管理系统</div>
        <div style="display: flex;align-items: center;gap: 10px;">
          <el-tooltip placement="bottom" effect="light">
            <div slot="content" style="padding: 0;">
              <el-button @click="exit">退出系统</el-button>
            </div>
            <el-avatar> {{$store.state.user.loginName}} </el-avatar>
          </el-tooltip>
          <el-tag v-if="$store.state.user.roleId == 1">系统管理员</el-tag>
          <el-tag v-else-if="$store.state.user.roleId == 2">活动管理员</el-tag>
          <el-tag v-else-if="$store.state.user.roleId == 3">教师</el-tag>
          <el-tag v-else-if="$store.state.user.roleId == 4">学员</el-tag>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            router>
     
            <el-menu-item index="/camp/activity" v-if="$store.state.user.roleId == 2">
              <i class="el-icon-menu"></i>
              <span slot="title">活动管理</span>
            </el-menu-item>
            <el-menu-item index="/camp/stu" v-if="$store.state.user.roleId == 2">
              <i class="el-icon-document"></i>
              <span slot="title">学员管理</span>
            </el-menu-item>
            <el-menu-item index="/camp/teacher" v-if="$store.state.user.roleId == 2">
              <i class="el-icon-setting"></i>
              <span slot="title">教师管理</span>
            </el-menu-item>
            <el-menu-item index="/camp/class" v-if="$store.state.user.roleId == 2">
              <i class="el-icon-setting"></i>
              <span slot="title">教学班管理</span>
            </el-menu-item>
            <el-submenu index="" v-if="$store.state.user.roleId == 3">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>课程管理</span>
              </template>
              <el-menu-item index="/camp/course-class">教学班列表</el-menu-item>
              <el-menu-item index="/camp/course">课程列表</el-menu-item>
            </el-submenu>
            <el-menu-item index="/camp/teach" v-if="$store.state.user.roleId == 3">
              <i class="el-icon-setting"></i>
              <span slot="title">教学管理</span>
            </el-menu-item>
            <el-menu-item index="/camp/study" v-if="$store.state.user.roleId == 4">
              <i class="el-icon-setting"></i>
              <span slot="title">课程学习</span>
            </el-menu-item>
            <el-menu-item index="/camp/user" v-if="$store.state.user.roleId == 1">
              <i class="el-icon-setting"></i>
              <span slot="title">用户管理</span>
            </el-menu-item>
            <el-submenu index="" v-if="$store.state.user.roleId == 1">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>数据管理</span>
              </template>
              <el-menu-item index="/camp/data/cat-activity">活动类别管理</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { info } from '@/api/common';
import router from '@/router';
import store from '@/store';
export default {
  methods:{
    getInfo(){
      info().then(res=>{
        console.log('info:',res);
        this.$store.commit('changeUser',res.data)
        localStorage.setItem('user',JSON.stringify(res.data))
      })
    },
    exit(){
      router.replace('/login')
      this.$cookies.remove('cp-token')
    }
  },
  created(){
    this.getInfo()
  }
}
</script>

<style lang="scss">
.el-container{
  height: 100vh;
}

.el-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
}
.el-aside ,.el-main{
  height: 100%;
}

.el-aside{
  border-right: 1px solid #d7d5d5;
}

.el-menu{
  border:0;
}

.el-tooltip__popper{
  padding: 0;
  border-color: #303133;
}
</style>